<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html {
  font-size: 15px;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  align-items: flex-end;
  background-image: linear-gradient( 109.6deg,  rgba(25,170,209,1) 11.3%, rgba(21,65,249,1) 69.9% );
}

.glass {
  width: 100%;
  height: 8rem;
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  display: flex;
  justify-content: center;
}

.dock {
  --scale: 1;
  
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dock li {
  font-size: calc(6rem * var(--scale));
  padding: 0 .5rem;
  cursor: default;
  
  position: relative;
  top: calc((6rem * var(--scale) - 6rem) / 2 * -1);
  
  transition: 15ms all ease-out;
}

.dock li.loading {
  animation: 1s loading ease-in infinite;
}

@keyframes loading {
  0%, 100% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(-40px);
  }
}
</style>
<body>
    <div class="glass">
        <ul class="dock">
          <li>😃</li>
          <li>😊</li>
          <li>😜</li>
          <li>😍</li>
          
        </ul>
      </div>
</body>
<script>
    document.querySelectorAll('.dock li').forEach(li => {
  li.addEventListener('click', e => {
    e.currentTarget.classList.add('loading')
  })
  
  li.addEventListener('mousemove', e => {
    let item = e.target
    let itemRect = item.getBoundingClientRect()
    let offset = Math.abs(e.clientX - itemRect.left) / itemRect.width
    let prev = item.previousElementSibling || null
    let next = item.nextElementSibling || null
    
    let scale = 0.6
    
    resetScale()
    
    if (prev) {
      prev.style.setProperty('--scale', 1 + scale * Math.abs(offset - 1))
    }
    
    item.style.setProperty('--scale', 1 + scale)
    
    if (next) {
      next.style.setProperty('--scale', 1 + scale * offset)
    }
  })
})

document.querySelector('.dock').addEventListener('mouseleave', e => {
  resetScale()
})

function resetScale() {
  document.querySelectorAll('.dock li').forEach(li => {
    li.style.setProperty('--scale', 1)
  })
}
</script>
</html>
